<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>预案类别管理</title>
    <link rel="stylesheet" href="/css/element.css">
</head>
<body>
<script src="/js/Vue.js"></script>
<script src="/js/element.js"></script>
<script src="/js/axios.js"></script>
<script src="/js/Qs.js"></script>
<script type="text/javascript" src="/js/layer.js"></script>
<style>
    #tools .el-card__body {
        padding: 5px 5px 5px 20px;
    }

    #tools .el-button {
        padding: 10px 8px 10px 5px;
    }

    .el-button {
        margin-left: 0 !important;
    }

    .el-input__inner {
        height: 38px;
    }

    .text {
        font-size: 14px;
    }

    .item {
        padding: 18px 0;
    }

    .el-card {
        width: 100%;
        box-sizing: border-box;
        margin-bottom: 2px;
    }

    .el-table_1_column_5:hover {
        cursor: pointer;
        border-bottom: 2px solid #409EFF;
    }

    .el-pagination {
        margin-top: 5px;
    }

    /*删除确认中的buttonCSS*/
    .el-popconfirm__action .el-button {
        margin-right: 10px;
    }
    #con {
        height:100%;
    }
    #search .el-card__body {
        height:40px;
    }
    #table {
        height:calc(100% - 74px);
    }
</style>
<div id="con">
    <el-card class="box-card" id="search">
        <el-form :inline="true" class="demo-form-inline">
            <el-form-item label="类别名称">
                <el-input v-model="type" placeholder="请输入预案类别名称" style="width:200px;"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button size="medium" type="primary" size="large">添加</el-button>
            </el-form-item>
        </el-form>
    </el-card>
    <!--    预案类别表格-->
    <el-card class="box-card" id="table">
        <el-table
                border
                :stripe="true"
                :data="categoryList"
                tooltip-effect="dark"
                style="width: 100%">
            <el-table-column
                    prop="categoryId"
                    label="类别id">
            </el-table-column>
            <el-table-column
                    prop="categoryName"
                    label="类别名称">
            </el-table-column>
            <!--            预案类别操作-->
            <el-table-column label="操作" width="300" align="center">
                <template slot-scope="scope">
                    <!-- "isTemplate"为true 则显示 编辑模板按钮-->
                    <el-button v-if="scope.row.isTemplate" size="mini"
                               @click="sceneNameEditAction(scope.$index, scope.row)"
                               icon="el-icon-setting"
                               type="success">修改场景名称
                    </el-button>
                    <el-popconfirm title="确定要删除该场景吗？" @confirm="">
                        <el-link slot="reference" icon="el-icon-delete" type="danger">删除</el-link>
                    </el-popconfirm>
                </template>
            </el-table-column>
        </el-table>
    </el-card>
</div>
<script>
    new Vue({
        el: "#con",
        data() {
            return {
                //添加预案的类别
                type: "",
                categoryList: [
                    {
                        "categoryId": 1,
                        "categoryName": "事故",
                        "pid": null,
                        "detail": null
                    },
                    {
                        "categoryId": 2,
                        "categoryName": "自然灾害",
                        "pid": null,
                        "detail": null
                    },
                    {
                        "categoryId": 3,
                        "categoryName": "测试类别",
                        "pid": null,
                        "detail": null
                    },
                    {
                        "categoryId": 5,
                        "categoryName": "111",
                        "pid": null,
                        "detail": null
                    },
                    {
                        "categoryId": 6,
                        "categoryName": "222",
                        "pid": null,
                        "detail": null
                    }
                ],
            }
        },
        mounted() {
        },
        methods: {}
    })
</script>
</body>
</html>